<template>
    <div class="notification-container">
        <n-card :title="typeJudge(info.type)" embedded>
            <template #header-extra>
                <n-tag round type="success" v-if="info.is_managed == 1">已通过</n-tag>
                <n-tag round type="error" v-else-if="info.is_managed == 2">已拒绝</n-tag>
                <div v-else>
                    <n-tooltip trigger="hover">
                        <template #trigger>
                            <n-button type="info" circle #icon @click="passNotify">
                                <n-icon>
                                    <check-icon />
                                </n-icon>
                            </n-button>
                        </template>
                        通过
                    </n-tooltip>
                    <n-tooltip trigger="hover">
                        <template #trigger>
                            <n-button
                                type="error"
                                circle
                                #icon
                                style="margin-left: 10px;"
                                @click="refuseNotify"
                            >
                                <n-icon>
                                    <close-icon />
                                </n-icon>
                            </n-button>
                        </template>
                        拒绝
                    </n-tooltip>
                </div>
            </template>
            <div v-if="info.type === 1">
                <n-p>
                    <span style="font-weight: bold;">用户：</span>
                    <n-text>{{ info.claim_data.acc }}</n-text>
                </n-p>
                <n-p>
                    <span style="font-weight: bold;">认证学者：</span>
                    <n-text>{{ info.claim_data.author }}</n-text>
                </n-p>
                <n-p>
                    <span style="font-weight: bold;">姓名：</span>
                    <n-text>{{ info.claim_data.name }}</n-text>
                </n-p>
                <n-p>
                    <span style="font-weight: bold;">机构：</span>
                    <n-text>{{ info.claim_data.org }}</n-text>
                </n-p>
                <n-p>
                    <span style="font-weight: bold;">认证理由：</span>
                    <n-text>{{ info.claim_data.reason }}</n-text>
                </n-p>
            </div>
            <div v-else>
                <n-p>
                    <span style="font-weight: bold;">投诉理由：</span>
                    <n-text>{{ reasonJudge(info.report_data.reason) }}</n-text>
                </n-p>
                <n-p>
                    <span style="font-weight: bold;">评论内容：</span>
                    <n-text>{{ info.report_data.content }}</n-text>
                </n-p>
            </div>
        </n-card>
    </div>
</template>

<script setup lang='ts'>
import { CheckRound as CheckIcon, CloseRound as CloseIcon } from '@vicons/material'
import { useDialog } from 'naive-ui'

// 声明 dialog 对象
const dialog = useDialog()

const props = defineProps([
    'info', 'index'
])

const emit = defineEmits(['checkNotify'])

const typeJudge = ((type: number) => {
    switch (type) {
        case 1:
            return "门户认证"
        default:
            return "评论投诉"
    }
})

const reasonJudge = ((type: string) => {
    switch (type) {
        case '0':
            return "违法违规"
        case '1':
            return "色情"
        case '2':
            return "低俗"
        case '3':
            return "赌博诈骗"
        case '4':
            return "人身攻击"
        case '5':
            return "侵犯隐私"
        case '6':
            return "垃圾广告"
        case '7':
            return "引战"
        case '8':
            return "刷屏"
        case '9':
            return "内容不相关"
        default:
            return "其他"
    }
})

const passNotify = (() => {
    dialog.info({
        title: '通过',
        content: '是否确定通过？',
        positiveText: '确定',
        negativeText: '取消',
        onPositiveClick: () => {
            var params = {
                id: props.info.type == 1 ? props.info.claim_data.id : props.info.report_data.id,
                type: props.info.type,
                index: props.index,
                pass: true
            }
            emit('checkNotify', params)
        }
    })
})

const refuseNotify = (() => {
    dialog.error({
        title: '拒绝',
        content: '是否确定拒绝？',
        positiveText: '确定',
        negativeText: '取消',
        onPositiveClick: () => {
            var params = {
                id: props.info.type == 1 ? props.info.claim_data.id : props.info.report_data.id,
                type: props.info.type,
                index: props.index,
                pass: false
            }
            emit('checkNotify', params)
        }
    })
})

</script>

<style scoped>
.notification-container {
    padding-bottom: 5px;
}

.n-card {
    break-inside: avoid;
    margin-bottom: 15px;
    border-radius: 25px;
}
</style>